<template>
  <div class="vm">
    <div ref="map" class="map-x"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import ImageStatic from 'ol/source/ImageStatic';
import ImageLayer from 'ol/layer/Image'
import {transformExtent} from 'ol/proj'
import * as turf from '@turf/turf'
export default {
  data() {
    return {
      map: null, // 地图
    };
  },

  methods: {
    addImageLayer() {
        var from = turf.point([119.164617, 28.242769]);
        var to = turf.point([119.712003, 28.242769]);
        var options = {units: 'miles'};

        var from1 = turf.point([119.164617, 28.242769]);
        var to1 = turf.point([119.164617, 28.609175]);
        var width = turf.distance(from, to, options);
        var height = turf.distance(from1, to1, options);
        debugger

      const extent = transformExtent(
        [119.164617, 28.242769, 119.712003, 28.609175],
        "EPSG:4326",
        "EPSG:4326"
      );
      let imageSource = new ImageStatic({
        url: './map/Map.png',
        projection: "EPSG:4326",
        imageExtent: extent,
        // projection: null
        locationFlag: "temperatureFieldImgSource",
      });

      this.imageLayered = new ImageLayer({
        source: imageSource,
        locationFlag: "temperatureFieldImgLayer",
        visible: true,
      });
      //添加到地图事例
      this.map.addLayer(this.imageLayered);
    },
    initMap() {
      let raster = new Tile({
        source: new OSM(),
      });

      this.map = new Map({
        target: this.$refs.map,
        layers: [raster],
        view: new View({
          projection: "EPSG:4326",
          center: [119.164617, 28.242769],
          zoom: 10,
        }),
      });
      this.addImageLayer();
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style></style>
